<template>
  <span
    :class="[
      'content-each',
      type === 'hostIp'
        ? 'first-content'
        : type === 'softwareName'
        ? 'last-content'
        : '',
    ]"
  >
    <span @click="changeScroller">
      {{ label }}=
      <span v-if="type !== 'hostIp' && type !== 'targetIp'"
        >{{ typeValue }}
      </span>
    </span>

    <el-popover
      placement="bottom"
      v-model="assetInfoVisible"
      v-if="type === 'hostIp' || type === 'targetIp'"
    >
      <div>地址信息：{{ results.position || "暂无信息" }}</div>
      <div>资产名称：{{ results.assetName }}</div>
      <div>业务类型：{{ results.bussinessType }}</div>
      <div>资产类型编码：{{ results.assetType }}</div>
      <template slot="reference">
        <span
          class="link"
          @mouseenter="getAssetInfo"
          @mouseleave="assetInfoHidden"
          @click="$emit('changeScroller')"
          >{{ typeValue }}
        </span>
      </template>
    </el-popover>
  </span>

  <!-- <el-popover
    placement="top"
    ref="popover"
    :width="width"
    v-model="visible"
    :append-to-body="false"
  >
    <div @click="addToSearch(typeValue)" style="cursor: pointer">
      添加至搜索
    </div>
    <span
      slot="reference"
      :class="[
        'content-each',
        type === 'hostIp'
          ? 'first-content'
          : type === 'softwareName'
          ? 'last-content'
          : '',
      ]"
    >
      <span @click="changeScroller">
        {{ label }}=
        <span v-if="type !== 'hostIp' && type !== 'targetIp'"
          >{{ typeValue }}
        </span>
      </span>

      <el-popover
        placement="bottom"
        v-model="assetInfoVisible"
        v-if="type === 'hostIp' || type === 'targetIp'"
      >
        <div>地址信息：{{ results.position || "暂无信息" }}</div>
        <div>资产名称：{{ results.assetName }}</div>
        <div>业务类型：{{ results.bussinessType }}</div>
        <div>资产类型编码：{{ results.assetType }}</div>
        <template slot="reference">
          <span
            class="link"
            @mouseenter="getAssetInfo"
            @mouseleave="assetInfoHidden"
            @click="$emit('changeScroller')"
            >{{ typeValue }}
          </span>
        </template>
      </el-popover>
    </span>
  </el-popover> -->
</template>

<script>
import { getAssetInfo } from "@/api/analysisCenter/log";

export default {
  name: "Popover",
  props: {
    width: {
      type: Number,
      default: 120,
    },

    label: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "",
    },
    typeValue: {
      type: String,
      default: "",
    },
    isScoller: {
      type: Boolean,
      default: false,
    },
    isShowTootip: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    isScoller: {
      handler(val) {
        if (val) {
          this.clearTempDom();
        }
      },
    },
  },
  data() {
    return {
      visible: false,
      assetInfoVisible: false,
      results: {
        position: "", //地址信息
        assetName: "", //资产名称
        bussinessType: "", //业务类型
      },
      isOver: false, //鼠标是否移入
      timer: null,
      startTime: null, //鼠标移入时间
    };
  },

  methods: {
    addToSearch() {
      this.visible = true;
      this.$emit("addToSearch", { type: this.type, typeValue: this.typeValue });
    },
    getAssetInfo() {
      if (this.type === "hostIp" || this.type === "targetIp") {
        this.isOver = true;
        this.startTime = new Date().getTime();
        this.timer = setTimeout(() => {
          getAssetInfo({ managerIp: this.typeValue }).then((res) => {
            this.assetInfoVisible = this.isOver;
            if (res && res.code === 200) {
              if (res.data) {
                this.results = res.data;
              } else {
                this.results = {
                  position: "", //地址信息
                  assetName: "", //资产名称
                  bussinessType: "", //业务类型
                  assetType: "",
                };
              }
            } else {
              this.results = {
                position: "", //地址信息
                assetName: "", //资产名称
                bussinessType: "", //业务类型
                assetType: "",
              };
            }
          });
        }, 500);
      }
    },
    assetInfoHidden() {
      this.assetInfoVisible = false;
      this.isOver = false;
      let endTime = new Date().getTime();
      if (endTime - this.startTime < 500) {
        //防止鼠标来回移动触发事件
        clearTimeout(this.timer);
      }
    },
    changeScroller(event) {
      this.clearTempDom();

      if (this.isShowTootip) {
        let dom = this.createDom("添加至搜索", event.pageX, event.pageY),
          container = document.getElementsByClassName("layout-container")[0];

        container.appendChild(dom);
        this.$emit("changeScroller");
      }
    },

    /**
     * 在鼠标右侧创建临时弹窗
     */
    createDom(info, pageX, pageY) {
      const offset = 8;
      const that = this;
      let dom = document.createElement("div");
      dom.classList.add("temp-dom");
      dom.style.left = `${pageX + offset}px`;
      dom.style.top = `${pageY + offset}px`;
      dom.innerHTML = info;
      dom.onclick = () => {
        that.addToSearch();
      };
      return dom;
    },

    /**
     * 清除临时dom弹窗
     */
    clearTempDom() {
      let tempDom = document.getElementsByClassName("temp-dom");
      if (tempDom && tempDom.length) {
        for (let i = tempDom.length - 1; i >= 0; i--) {
          tempDom[i].remove();
        }
      }
    },
  },
  mounted() {
    const that = this;
    document.addEventListener(
      "click",
      () => {
        that.clearTempDom();
      },
      true
    );
  },
};
</script>

<style lang="scss" scoped>
.content-each {
  border-right: 1px dashed grey;
  padding: 0 10px;
  cursor: pointer;
}

.first-content {
  padding: 0px 10px 0px 0px;
}

.last-content {
  border-right: 0;
}

.link {
  color: var(--theme-color);
}
</style>
<style lang="scss">
.temp-dom {
  position: absolute;
  background-color: #fff;
  padding: 12px;
  font-size: 14px;
  color: #606266;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 40%);
  word-break: break-all;
  border-radius: 4px;
  line-height: 1.4;
  text-align: justify;
  font-size: 14px;
  z-index: 999;
  cursor: pointer;
}
</style>
